<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 15:07:28
 -->
<template>
  <div class="app-container">
    <div class="border-gay padding10 clearfix">
      <div class="clearfix fl wPer50">
        <div class="pic fl paddingR10">
          <img class="border-gay" src="https://www.baidu.com/img/bd_logo1.png" width="80" height="80">
        </div>
        <div class="text fl">
          <h3>{{ comegoName }}</h3>
          <p class="font12 line-height20 color-gay">
            时间周期：{{ timeRange }}<br>
          </p>
        </div>
      </div>
      <div class="fr w100 paddingTb20">
        <el-button type="default" @click="() => { isShowChart = !isShowChart}">
          {{ isShowChart ? '收起图表' : '展开图表' }}
        </el-button>
      </div>
    </div>
    <div v-show="isShowChart" class="border-gay padding10">
      <Chart ref="chart" />
    </div>
    <div class="margin-t20">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <div class="fl">
            <el-radio-group v-model="dataObj.showBy" @change="onShowByChange">
              <el-radio :label="1">按单据</el-radio>
              <el-radio :label="2">按商品</el-radio>
            </el-radio-group>
          </div>
          <div class="fr">
            <el-input
              v-if="dataObj.showBy === 1"
              v-model="searchData.keywords"
              clearable
              style="width: 360px"
              placeholder="按单据编号,客户名称搜索"
              @keydown.enter.native="btnSearch"
            />
            <el-input
              v-if="dataObj.showBy === 2"
              v-model="searchData.keywords"
              clearable
              style="width: 360px"
              placeholder="按客户名称搜索"
              @keydown.enter.native="btnSearch"
            />
            <el-button type="default" :loading="btnLoading.export" @click="btnSearch()">
              导出
            </el-button>
            <el-button type="primary" :loading="btnLoading.search" @click="btnSearch()">
              搜索
            </el-button>
          </div>
        </div>
        <vxe-grid
          ref="table"
          class="grid margin-t10"
          border
          resizable
          highlight-hover-row
          :loading="tableLoading.table"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :columns="columnsData"
          :data="tableData.table"
        />
      </el-card>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.size"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.current"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import Affix from '@/components/Affix'
import columns from './columns'
import { detailComegoGroupByGoods, detailComegoGroupByBill } from '@/api/report/purchase.js'
import Chart from '@/views/report/components/chart.vue'
import { listByComegoGroupbyDay as listGroupbyDay,
  listByComegoGroupbyMonth as listGroupbyMonth,
  listByComegoGroupbyYear as listGroupbyYear,
  getBillRangeTimeByComego as getBillRangeTime } from '@/api/charts/sale.js'
import { getChartTimeType, getChartDayData, getChartMonthData, getChartYearData } from '@/views/report/utils/chart.js'

export default {
  name: 'DetailByGoods',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, Chart },
  mixins: [oftenuse, columns],
  props: {
    comegoId: {
      type: String,
      required: true
    },
    comegoName: {
      type: String,
      required: true
    },
    beginTime: {
      type: String,
      default: null
    },
    endTime: {
      type: String,
      default: null
    },
    tab: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      searchData: {},
      isShowChart: true
    }
  },
  computed: {
    timeRange: function() {
      const rangeMap = {
        0: '全部',
        1: '今天',
        2: '昨天',
        3: '本月',
        4: '上个月'
      }
      const tab = Number(this.tab)
      if (tab < 5) {
        return rangeMap[tab]
      }
      return `${this.beginTime} - ${this.endTime}`
    },
    columnsData: function() {
      const showBy = this.dataObj.showBy
      if (showBy === 1) return this.columnsByBill
      return this.columnsByGood
    }
  },
  watch: {
    'dataObj.showBy': {
      handler(val) {
        this.getReportData(val)
      },
      immediate: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnSearch() {
      this.getReportData(this.dataObj.showBy)
    },
    // api
    initData() {
      this.initSearchData()
      this.$set(this.dataObj, 'showBy', 1)
      this.initChartData()
    },
    initChartData() {
      const beginTime = this.beginTime
      const endTime = this.endTime
      if (!beginTime || !endTime) {
        this.getBillRangeTime(this.skuId).then(data => {
          const { beginTime, endTime } = data
          const timeType = getChartTimeType(beginTime, endTime)
          this.dispatchTimeType(timeType, beginTime, endTime)
        })
        return
      }
      const timeType = getChartTimeType(beginTime, endTime)
      this.dispatchTimeType(timeType, beginTime, endTime)
    },
    dispatchTimeType(timeType, beginTime, endTime) {
      if (timeType === 1) this.handleDayChart(beginTime, endTime)
      if (timeType === 2) this.handleMonthChart(beginTime, endTime)
      if (timeType === 3) this.handleYearChart(beginTime, endTime)
    },
    getBillRangeTime() {
      return new Promise((resolve, reject) => {
        getBillRangeTime(this.comegoId).then(res => {
          if (res.data.flag) {
            const data = res.data.data
            resolve(data)
          }
        })
      })
    },
    handlerAllChart() {
      const params = this.searchData
      listGroupbyMonth(params).then(res => {
        if (res.data.flag) {
          const data = res.data.data
          const beginTime = this.beginTime
          const endTime = this.endTime
          const reportData = Object.assign(getChartDayData(data, beginTime, endTime), { title: '进货额' })
          this.$refs.chart.initChart(reportData)
        }
      })
    },
    handleDayChart(beginTime, endTime) {
      const params = this.searchData
      listGroupbyDay(params).then(res => {
        if (res.data.flag) {
          const data = res.data.data
          const reportData = Object.assign(getChartDayData(data, beginTime, endTime), { title: '进货额' })
          this.$refs.chart.initChart(reportData)
        }
      })
    },
    handleMonthChart(beginTime, endTime) {
      const params = this.searchData
      listGroupbyMonth(params).then(res => {
        if (res.data.flag) {
          const data = res.data.data
          const reportData = Object.assign(getChartMonthData(data, beginTime, endTime), { title: '进货额' })
          this.$refs.chart.initChart(reportData)
        }
      })
    },
    handleYearChart(beginTime, endTime) {
      const params = this.searchData
      listGroupbyYear(params).then(res => {
        if (res.data.flag) {
          const data = res.data.data
          const reportData = Object.assign(getChartYearData(data, beginTime, endTime), { title: '进货额' })
          this.$refs.chart.initChart(reportData)
        }
      })
    },
    initSearchData() {
      this.$set(this.searchData, 'comegoId', this.comegoId)
      this.$set(this.searchData, 'beginTime', this.beginTime)
      this.$set(this.searchData, 'endTime', this.endTime)
    },
    getReportData(showBy = 1) {
      const method = showBy === 1 ? detailComegoGroupByBill : detailComegoGroupByGoods
      const params = {
        page: this.pageInfo,
        data: this.searchData
      }
      this.setTableLoading('table', true)
      method(params).then(res => {
        this.setTableLoading('table', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('table', records || [])
        this.pageInfo.total = total
      })
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getStockLogByGood()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getStockLogByGood()
    },
    onShowByChange(val) {
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
